<script lang="ts" setup>
import FormatFormVue from "@/Components/FormatForm.vue";
import PaginationVue from "@/Components/Pagination.vue";
import PayInfoInlineVue from "./Components/PayInfoInline.vue";

import { ref, reactive, onBeforeMount } from "vue";
import { TableColumnCtx, ElTable } from "element-plus";
import { filterSex, filterClientStatus } from "@/utils/filters";
import { ClientApi } from "@/Api/Client";

interface SpanMethodProps {
   row: Client.Table;
   column: TableColumnCtx<Client.Table>;
   rowIndex: number;
   columnIndex: number;
}

const form = reactive<Client.Search>({
   name: "",
   sex: "",
   status: "",
   time: ""
});
const formOptions = reactive<FormOptions<Client.Search>>({
   name: {
      type: "text",
      value: "",
      placeholder: "手机号/昵称查询"
   },
   sex: {
      type: "select",
      value: "",
      placeholder: "请选择性别",
      options: [
         { label: "全部性别", value: "" },
         { label: "保密", value: "PRIVACY" },
         { label: "男", value: "MAN" },
         { label: "女", value: "WOMAN" }
      ]
   },
   status: {
      type: "select",
      value: "",
      placeholder: "请选择帐号状态",
      options: [
         { label: "全部状态", value: "" },
         { label: "正常", value: "NORMAL" },
         { label: "注销", value: "LOGINOUT" }
      ]
   },
   time: {
      type: "datetime",
      value: null,
      placeholders: ["注册开始时间", "注册截至时间"]
   }
});
const laypage = reactive<Laypage>({
   pageNum: 1,
   pageSize: 20,
   total: 10
});

const tableData = ref<Client.Table[]>();
const loadingTable = ref(false);
const activePayInfo = reactive<string[]>([]);

async function submit() {
   loadingTable.value = true;

   try {
      const params: PaginationSearch<Client.Search> = {
         form,
         laypage
      };

      const res = await ClientApi.Search(params);
      if (res.code === 200) {
         const { data } = res;
         tableData.value = data.list;
         laypage.total = data.total;
         laypage.pageNum = data.pageNum;
         laypage.pageSize = data.pageSize;
      }
   } catch (error) {
      console.log("error", error);
   }

   loadingTable.value = false;
}

function sizeChange(num: number) {
   laypage.pageSize = num;
   submit();
}
function currentChange(num: number) {
   laypage.pageNum = num;
   submit();
}

/** 查看缴费信息 */
async function checkPayInfo(data: Client.Table) {
   if (!tableData.value) return;
   const index = tableData.value.findIndex(item => item.id == data.id);
   activePayInfo.push(data.id);

   tableData.value.splice(index + 1, 0, {
      ...data,
      name: data.id
   });
}

/** 关闭支付信息显示 */
function closePayInfo(row: Client.Table) {
   if (!tableData.value) return;
   // 从表格数据中删除
   tableData.value.splice(tableData.value.findIndex(item => item.id == row.id) + 1, 1);

   // 从激活列表中删除
   activePayInfo.splice(
      activePayInfo.findIndex(item => item == row.id),
      1
   );
}

/** 单元格合并处理 */
function spanMethod(props: SpanMethodProps) {
   const { row, column } = props;
   const length = Object.keys(row).length;

   if (row.id == row.name) {
      if (column.property == "operation") {
         return [1, length];
      } else {
         return [0, 0];
      }
   } else {
      return [1, 1];
   }
}

function handlerCopy(text: string) {
   navigator.clipboard
      .writeText(text)
      .then(() => {
         ElMessage.success("复制成功");
      })
      .catch(() => {
         ElMessage.error("复制失败");
      });
}

onBeforeMount(() => {
   submit();
});
</script>

<template>
   <div class="clientList">
      <FormatFormVue :form="form" :form-options="formOptions" @submit="submit"> </FormatFormVue>
      <div class="tabBox shadowCard">
         <el-table
            v-loading="loadingTable"
            :data="tableData"
            stripe
            border
            empty-text="暂无数据"
            tooltip-effect="light"
            :span-method="spanMethod">
            <el-table-column type="selection" width="50" fixed="left" align="center" />
            <el-table-column prop="phone" label="手机号码" width="150" fixed="left" show-overflow-tooltip>
               <template #default="{ row }: { row: User.Table }">
                  <span v-if="!!row.phone" class="phone" @click="handlerCopy(row.phone)">{{ row.phone }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="name" label="昵称" />
            <el-table-column prop="sex" label="性别" width="75" align="center">
               <template #default="{ row }: { row: Client.Table }">
                  <span>{{ filterSex[row.sex] }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="sign" label="签名" />
            <el-table-column prop="status" label="状态">
               <template #default="{ row }: { row: Client.Table }">
                  <span>{{ filterClientStatus[row.status] }}</span>
               </template>
            </el-table-column>
            <el-table-column prop="created_time" label="注册时间" width="200" />

            <el-table-column prop="operation" label="操作" fixed="right" width="100" align="center">
               <template #default="{ row, column }: { row: Client.Table; column: TableColumnCtx<Client.Table> }">
                  <div v-if="row.id != row.name" class="payInfo_button">
                     <el-link v-if="!activePayInfo.includes(row.id)" type="primary" @click="checkPayInfo(row)">
                        <el-icon><ArrowDownBold /></el-icon>
                        显示缴费
                     </el-link>
                     <el-link v-else type="primary" @click="closePayInfo(row)">
                        <el-icon><ArrowUpBold /></el-icon>
                        隐藏缴费
                     </el-link>
                  </div>

                  <div v-else class="inline_table_box">
                     <PayInfoInlineVue :data="row" />
                  </div>
               </template>
            </el-table-column>
         </el-table>
      </div>
      <PaginationVue :laypage="laypage" @size-change="sizeChange" @current-change="currentChange" />
   </div>
</template>

<style lang="scss" scoped>
.clientList {
   width: 100%;
   height: 100%;
   display: flex;
   flex-flow: column nowrap;
}

.tabBox {
   flex: 1;
   width: 100%;
   position: relative;
   box-sizing: border-box;
   padding: 15px;
   > .el-table {
      position: absolute;
      width: calc(100% - 30px);
      height: calc(100% - 30px);

      .el-icon {
         margin-right: 5px;
      }

      .inline_table_box {
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         box-sizing: border-box;
         padding-block: 20px;
         padding-inline: 55px;
      }
   }

   .phone {
      cursor: pointer;
   }
}

.payInfo_button {
   cursor: pointer;
}

.el-link {
   user-select: none;
}
</style>
